<template>
	<view class="footer-fixed">
		<view class="footer-box">
			<view class="footer-item" @click="toShare">
				<text class="footer-icon npIcon-fenxiang"></text>
				<text>分享</text>
			</view>
			<view class="footer-item" :class="[fav ? 'fav-active' : '']" @click="toFav">
				<text class="footer-icon npIcon-fav"></text>
				<text>{{fav ? '已收藏' : '收藏'}}</text>
			</view>
			<view class="footer-bottom">
				<view v-if="api === 'pdd'" class="footer-btn btn-mr" @click="buyNow(1)">{{quan > 0 ? '领券' : '立即'}}拼团</view>
				<!-- #ifdef MP-WEIXIN -->
				<view v-if="api === 'ali'" class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '购买'}}口令</view>
				<view v-else class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '立即'}}购买</view>
				<!-- #endif -->
				<!-- #ifdef MP-QQ -->
				<view v-if="api === 'ali'" class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '购买'}}口令</view>
				<view v-else class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '立即'}}购买</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="api === 'ali' && iswechat" class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '购买'}}口令</view>
				<view v-else class="footer-btn" @click="buyNow()">{{quan > 0 ? '领券' : '立即'}}购买</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iswechat: this.$config.isTencent()
			}
		},
		props:{
			fav: {
				type: Boolean,
				default: false
			},
			api: {
				type: String,
				default: ''
			},
			quan: {
				type: [Number,String],
				default: 0
			},
		},
		methods:{
			buyNow(pintuan){
				this.$emit('buynow', pintuan);
			},
			toFav() {
				this.$emit('fav');
			},
			toShare() {
				// #ifndef MP-QQ
				this.$emit('share');
				// #endif
				// #ifdef MP-QQ
				this.$config.toast('请点击右上角【...】')
				// #endif
			}
		}
	}
</script>

<style>
	.footer-fixed {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		left: 0;
	}

	.footer-box {
		height: 100%;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
	}

	.footer-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 140upx;
		height: 100%;
		font-size: 22upx;
		color: #333333;
	}
	
	.footer-icon{
		width: 100upx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 5upx;
		text-align: center;
		font-size: 40upx;
	}
	
	.footer-bottom {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.footer-btn{
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 30rpx;
		border-radius: 50rpx;
		background-color: #e54d42;
		text-align: center;
		color: white;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}
	
	.btn-mr {
		margin-right: 20rpx;
	}
	
	.fav-active {
		color: #f37b1d;
	}
</style>
